<html>
<head>
	<meta charset="utf8"/>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
	   <div class="navbar-left">
			<ul class="nav navbar-nav" style="margin-top:0px;">
				<li><a id="rectangle" class="btn"><i class="fa fa-adn fa-lg"></i> 矩形</a></li>
				<li><a id="curve" class="btn"><i class="fa fa-stumbleupon fa-lg"></i>曲线</a></li>
				<li><a id="line" class="btn"><i class="fa fa-italic fa-lg"></i> 直线</a></li>
				<li><a id="ellipse" class="btn"><i class="fa fa-leaf fa-lg"></i>椭圆</a></li>
		        <li><a id="label" class="btn"><i class="fa fa-pencil-square-o fa-lg"></i>标记框</a></li>
		        <li><a id="eraser" class="btn" data-toggle="dropdown">
					<i class="fa fa-eraser fa-lg" ></i>橡皮擦
					<strong class="caret"></strong>
				    <ul class="dropdown-menu" style="background-color:#F2F2F2;text-align:center;">
						<li class="title_size">大小</li>
						<button id="8" name="eraser_size" class="btn_size btn_size1" ></button>
						<button id="12" name="eraser_size" class="btn_size btn_size2"></button>
						<button id="25" name="eraser_size" class="btn_size btn_size3"></button>
						<li>
						   <a href="#"></a>
						</li>
							
					</ul>
				</a>
				</li>
				<li>
					<a class="btn" data-toggle="dropdown"><i class="fa fa-magic fa-lg"></i>笔<strong class="caret"></strong>
					
						<ul class="dropdown-menu" style="background-color:#F2F2F2;text-align:center;">
						    <li class="title_color">颜色</li>
						    <button id="0" name="pen_color" class="btn_color white"></button>
							<button id="1" name="pen_color" class="btn_color gray"></button>
							<button id="2" name="pen_color" class="btn_color black"></button><br/>
							<button id="3" name="pen_color" class="btn_color yellow"></button>
							<button id="4" name="pen_color" class="btn_color orange"></button>
							<button id="5" name="pen_color" class="btn_color green"></button><br/>
							<button id="6" name="pen_color" class="btn_color cerulean"></button>
							<button id="7" name="pen_color" class="btn_color blue"></button>
							<button id="8" name="pen_color" class="btn_color ice_blue"></button><br/>
							<button id="9" name="pen_color" class="btn_color pink"></button>
							<button id="10" name="pen_color" class="btn_color red"></button>
							<button id="11" name="pen_color" class="btn_color brown"></button><br/>
							<li class="title_size">大小</li>
							<button id="1" name="pen_size" class="pencil_size pencil_size1"></button>
							<button id="20" name="pen_size" class="pencil_size pencil_size2"></button>
							<button id="30" name="pen_size" class="pencil_size pencil_size3"></button>
							<li>
							   <a href="#"></a>
							</li>
							
						</ul>
					</a>
				</li>
				<li>
					<a class="btn" data-toggle="dropdown"><i class="fa fa-magic fa-lg"></i>荧光笔<strong class="caret"></strong>
					
						<ul class="dropdown-menu" style="background-color:#F2F2F2;text-align:center;">
						    <li class="title_color">颜色</li>
						    <button id="0" name="nitepen_color" class="btn_color transparent_pink"></button>
							<button id="1" name="nitepen_color" class="btn_color transparent_blue"></button>
							<button id="2" name="nitepen_color" class="btn_color transparent_sky"></button><br/>
							<button id="3" name="nitepen_color" class="btn_color transparent_green"></button>
							<button id="4" name="nitepen_color" class="btn_color transparent_yellow"></button>
							<button id="5" name="nitepen_color" class="btn_color transparent_orange"></button><br/>
							<li class="title_size">大小</li>
							<button id="1" name="nitepen_size" class="pencil_size pencil_size1"></button>
							<button id="20" name="nitepen_size" class="pencil_size pencil_size2"></button>
							<button id="30" name="nitepen_size" class="pencil_size pencil_size3"></button>
							<li>
							   <a href="#"></a>
							</li>
							
						</ul>
					</a>
				</li>
			</ul>
		</div>
		<div class="collapse navbar-collapse navbar-right">
		    <ul class="nav navbar-nav" style="margin-top:0px;margin-right:10px;">
			   <li><a id="save" class="btn"><i class="fa  fa-star-o fa-lg"></i>收藏</a></li>
		       <!-- <li><a id="share" class="btn"><i class="fa fa-floppy-o fa-lg"></i>保存</a></li> -->
		       <li><a id="exit" class="btn"><i class="fa fa-sign-out fa-lg"></i>退出</a></li>
			</ul>
		</div>
    </nav>
	
	<!--模态框添加收藏-->
	 
			<div class="modal fade" id="modal-save" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:400px;">
					<div class="modal-content">
						<div class="modal-header" style="background-color:#ECECEC;">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel" >
								添加到我的收藏
							</h4>
						</div>
						<form  id="form_save" method='post'>
						    <div class="modal-body">
							    <label for="save_name">名称:</label>
              	                <input type="text" id="save_name" class="form-control" required/><br/>
				                <label for="save_class">分类:</label><br/>
				                <select id="save_class">
									
				                </select><br><br>
				                <div class="link">
					                <a id="new_class" href="#">新建分类</a>
				                </div>
						    </div>
						    <div class="modal_footer">
							    <button type="button" class="btn_cancel" data-dismiss="modal">关闭</button> 
							    <button type="button" id="sure_save" class="btn_save">保存</button>
						    </div>
						    <input type="hidden" id="auth" name="auth" value="" />
							<input type="hidden" id="typeId" name="typeId" value="" />
							<input type="hidden" id="NoteData" name="NoteData" value=""/>
						</form>
					</div>
				</div>
			</div>
	<!--模态框-->
	
	<!--模态框新建收藏-->
	 
			<div class="modal fade" id="modal_new" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:400px;">
					<div class="modal-content">
						<div class="modal-header" style="background-color:#ECECEC;">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel" >
								新建分类
							</h4>
						</div>
						<form  id='new_form' method='post'>
						    <div class="modal-body">
							   <label for="save_name">分类名称:</label>
              	               <input type="text" name="typename" id="photo_name" class="form-control" required/><br/>
						    </div>
							<div class="modal_footer">
								 <button type="button" class="btn_cancel" data-dismiss="modal">关闭</button> 
								 <button id="newClassButton" type="button" class="btn_save">保存</button>
							</div>
						</form>
					</div>
				</div>
			</div>
	<!--模态框-->
	<!--模态框用户登录Start-->
	 
			<div class="modal fade" id="modal_login" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:400px;">
					<div class="modal-content">
						<div class="modal-header" style="background-color:#ECECEC;">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel" >
								用户登录
							</h4>
						</div>
						<form  id='login_form' method='post'>
						    <div class="modal-body">
							   <div class="form-group">
                                  <div class="input-group" >
                                    <span class="input-group-addon"><span class="fa fa-user fa-lg"></span></span>
                                    <input id="userName" type="text" class="form-control" name="username" required>
                                  </div>
                               </div>
			                   <div class="form-group">
                                  <div class="input-group" >
                                    <span class="input-group-addon"><span class="fa fa-unlock-alt fa-lg" style="width:15px;"></span></span>
                                    <input id="userPwd" type="password" class="form-control" name="password" required>
                                  </div>
                               </div>
						    </div>
						    <div class="modal_footer">
							    <button type="button" class="btn_register" id="login">登录</button>
								<div class="link">
                                    <a class="link" id="register" href="http://chrome.tisa.tk/user/register"> 注册</a>
                                </div>
						    </div>
							<input type="hidden" name="auth" value="login" />
						</form>
					</div>
				</div>
			</div>
	<!--模态框用户登录End-->
	<canvas id="note"></canvas>
	<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
	<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/Note.css" type="text/css">
	<link rel="stylesheet" href="css/NoteLabel.css" type="text/css"/>
	<link rel="stylesheet" href="css/NoteContainter.css" type="text/css">
	<link rel="stylesheet" href="css/color.css" type="text/css">
	<link rel="stylesheet" href="css/modal.css" type="text/css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/Library.js"></script>
	<script src="js/NoteDraw.js"></script>
	<script src="js/NoteLabel.js"></script>
	<script src="js/NoteContainter.js"></script>
	<script src="js/Note.js"></script>
</body>
</html>